import {IButtonMenu, IDomEditor} from '@wangeditor/editor'
import {GapElement} from './renderElem.ts'

class GapMenu implements IButtonMenu {
	tag: string
	title: string
	iconSvg: string
	
	constructor() {
		this.title = '填空' // 鼠标悬浮显示
		this.tag = 'button'
		this.iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M21 5L9 17l-5.5-5.5l1.41-1.41L9 14.17L19.59 3.59zM3 21v-2h18v2z"/></svg>' // 菜单图标
	}
	
	isActive(): boolean { // 保持默认
		return false
	}
	
	getValue(): string | boolean { // 保持默认
		return ''
	}
	
	isDisabled(): boolean { // 保持默认
		return false
	}
	
	exec(editor: IDomEditor) { // 菜单点击事件，这里将点击事件暴露出去
		if (this.isDisabled()) {
			return
		}
		const spanRegex = new RegExp('<span data-w-e-type="gapFilling" data-gap-num=".*?" class="gapFilling">.*?<\\/span>', 'g')
		const gapFillingItems = editor.getHtml().match(spanRegex)
		let num = gapFillingItems?.length || 0
		// 插入节点
		const attachmentElem: GapElement = {
			type: 'gapFilling',
			gapNum: num + 1,
			children: [{text: ''}]
		}
		editor.insertNode(attachmentElem)
	}
}

export default GapMenu
